<!-- app-footer.component.html -->
<footer class="footer" >
  <div class="footer-content">
    <div class="footer-brand">
      <h3>智慧图书馆电商平台</h3>
      <p>为现代图书馆提供全方位的数字化管理解决方案</p>
      <div class="social-links">
        <a nz-button nzType="link" href="#">
          <i nz-icon nzType="link"></i>
        </a>
        <a nz-button nzType="link" href="#">
          <i nz-icon nzType="star"></i>
        </a>
        <a nz-button nzType="link" href="#">
          <i nz-icon nzType="share-alt"></i>
        </a>
      </div>
    </div>

    <div class="footer-section">
      <h4>核心技术</h4>
      <ul>
        <li>Vue.js 2.6.14</li>
        <li>Element UI</li>
        <li>Vue Router</li>
        <li>响应式设计</li>
      </ul>
    </div>

    <div class="footer-section">
      <h4>系统模块</h4>
      <ul>
        <li>图书目录管理</li>
        <li>库存动态跟踪</li>
        <li>大量订单处理</li>
        <li>分类层级管理</li>
      </ul>
    </div>

    <div class="footer-section">
      <h4>技术支持</h4>
      <ul>
        <li><a href="https://v2.vuejs.org/" target="_blank">Vue.js 官方文档</a></li>
        <li><a href="https://element.eleme.cn/" target="_blank">Element UI 组件库</a></li>
        <li><a href="#" target="_blank">系统使用手册</a></li>
      </ul>
    </div>
  </div>

  <div class="footer-bottom">
    <div class="footer-bottom-content">
      <p>&copy; 2024 智慧图书馆电商平台. 让图书管理更加智能高效。</p>
      <div class="footer-badges">
        <span class="badge">Vue 2.x</span>
        <span class="badge">图书管理</span>
        <span class="badge">电商系统</span>
      </div>
    </div>
  </div>
</footer>
